<template>
	<view>
		<view v-if="viewData.length>0">
			<view class="contentBg">
				<view class="content">
					<view class="rows" v-for="(item, index) in viewData" :key="index">
						<view class="rowtop">
							<view class="rowleft">
								<image v-if="item.Name === 'Inlet Temp'" src="@/static/tem.png" mode="aspectFill">
								</image>
								<image v-else-if="item.Name === 'SH'" src="@/static/sh.png" mode="aspectFill">
								</image>
								<image v-else-if="item.Name === 'Cond Fan'" src="@/static/fan.png" mode="aspectFill">
								</image>
								<image v-else-if="item.Name === 'High Press'" src="@/static/press.png"
									mode="aspectFill"></image>
							</view>
							<view class="rowright">
								<text class="value">{{item.Value}}</text>
								<text class="unit">{{item.Unit}}</text>
							</view>
						</view>
						<text class="titles">{{item.Name}}</text>
						<text class="time">{{item.Time}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loading-page style="z-index:9" :loading="loading" loading-text="loading..." bg-color="rgb(0, 0, 0,.3)">
		</u-loading-page>
	</view>
</template>

<script>
	import uniSection from '@/uni_modules/uni-section/components/uni-section/uni-section.vue'
	export default {
		name: "deviceRelaData",
		props: {
			queryData: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		data() {
			return {
				viewData: [],
				loading: true,
				updateInterval: null,
			}
		},

		computed: {

		},
		components: {
			uniSection
		},
		methods: {
			updateValues() {
				this.viewData.forEach(item => {
					item.Value = Math.min(80, parseFloat((Math.random() * 70).toFixed(2)));
					item.Time = this.getCurrentTime();
					if (item.Value > 80) {
						item.Value = 80;
					}
				});
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			async getGwData() {
				const db = uniCloud.database()
				let str = 'ASCG123456789/rs485b/1'
				const [sn, port, addr] = str.split('/')
				const res = await db.collection('gateways').where({
					category: 'realtime',
					name: sn
				}).get()
				const result = res.result.data[0].ports[port].Device[addr - 1].data
				const filterData = result.filter(item => item.PropertyType === 'realtime')
				this.viewData = filterData.filter(val => ['SH', 'Inlet Temp', 'Cond Fan', 'High Press'].includes(val
					.Name))
				this.loading = false;
			},
		},
		created() {
			this.getGwData()
			this.updateInterval = setInterval(this.updateValues, 5000);
		},
		beforeDestroy() {
			if (this.updateInterval) {
				clearInterval(this.updateInterval);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBg {
		width: 690rpx;
		margin: 20rpx auto;

		.content {
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(2, 1fr);

			.rows {
				border-radius: 10px;
				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
				padding: 10px;
				overflow: hidden;
				background: rgba(255, 255, 255, 0.9);

				.titles {
					display: inline-block;
					margin-top: 10px;
					font-size: 18px;
					font-weight: 700;
					color: rgba(111, 126, 168, 1);
				}

				.time {
					font-size: 12px;
					display: block;
					text-align: center;
					margin-top: 5px;
				}

				.rowtop {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.rowleft {
						width: 52px;
						height: 52px;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.rowright {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.value {
							font-size: 24px;
							font-weight: 700;
							color: rgba(33, 36, 54, 1);
						}

						.unit {
							font-size: 12px;
							color: rgba(121, 135, 148, 1);
							margin-top: 6px;
						}
					}
				}
			}
		}
	}
</style>